<!--
 * @Author: luohongbiao
 * @Date: 2022-02-22 10:37:55
 * @LastEditTime: 2022-02-22 14:07:20
 * @LastEditors: luohongbiao1
 * @Description: 
 * @FilePath: \face_problem\1.js_base\10.事件冒泡以及事件捕获.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 事件冒泡：例如点击某个元素，被点击的元素 首先触发事件。然后事件沿DOM树一路向上，在经过的每个节点上依次触发，
        // 直到document对象
    </script>
    <div onclick="console.log('a')">
        <div onclick="console.log('b')">
            <div onclick="console.log('c')">
                <div onclick="console.log('d')">
                    点我
                </div>
            </div>
        </div>
    </div>

    <script>
        // 事件捕获：例如点击某个元素，首页由最不具体的节点先触发，最具体的节点最后收到事件。 document-html-body-div
        // 实际当中基本不会使用事件捕获

        // DOM事件流：分为3个阶段：事件捕获，到达目标，事件冒泡。
        // 1、事件捕获最先发生，为提前拦截事件提供了功能。
        // 2、到达：实际的目标元素接到事件
        // 3、冒泡：响应事件
    </script>
</body>

</html>